<template>
	<div ref="chart" style="width:1.3rem;height:1.3rem;"></div>
</template>

<script>
	import Echart from '@/common/echart';
	import request from '@/utils/request';
	export default {
		components: {
			Echart
		},
		data() {
			return {
				intervalMethods: null,
				colorObj: {
					textStyle: "#3fc0fb",
					series: {
						color: ["#00bcd44a", "transparent"],
						dataColor: {
							normal: "#03a9f4",
							shadowColor: "#97e2f5"
						}
					}
				},
				options: {
					title: {
						text: 0 * 1 + "%",
						x: "center",
						y: "center",
						textStyle: {
							color: "#3fc0fb",
							fontSize: 16
						}
					},
					series: [{
						type: "pie",
						radius: ["75%", "80%"],
						center: ["50%", "50%"],
						hoverAnimation: false,
						color: ["#00bcd44a", "transparent"],
						label: {
							normal: {
								show: false
							}
						},
						data: [{
								value: 0,
								itemStyle: {
									normal: {
										color: "#03a9f4",
										shadowBlur: 10,
										shadowColor: "#97e2f5"
									}
								}
							},
							{
								value: 100 - 0
							}
						]
					}]
				},
			}
		},
		methods: {
			getReuestData() {
				let _this = this;
				request({
					url: '/magic-api/system/hardwareInfo',
					method: 'post',
				}).then(response => {
					if (response.data.cpuInfo) {
						var total = response.data.cpuInfo.toTal;
						var available = response.data.cpuInfo.used;
						var rate = (available / total * 100).toFixed(2)
						_this.options.series[0].data[0].value = rate;
						_this.options.title.text = rate + "%";
						_this.options.series[0].data[1].value = 100 - rate;
						_this.options.series[0].data[0].name = "CPU";
					}
					_this.drawChart();
				})
			},
			drawChart() {
				if(this.$refs.chart){
					let echart = this.$echarts.init(this.$refs.chart, "default");
					echart.setOption(this.options);
				}
			},
		},
		mounted() {
			let defaultTheme = require('../../../echarts/default.json');
			this.$echarts.registerTheme('default', defaultTheme.theme);
			let _this = this;
			this.intervalMethods = setInterval(() => {
				_this.getReuestData()
			}, 1000)

		},
		destroyed(){
			clearInterval(this.intervalMethods)
		}
	}
</script>

<style>
</style>
